<!-- 主题设置抽屉 license by http://eleadmin.com -->
<template>
  <el-drawer
    size="1200px"
    :visible="visible"
    :append-to-body="true"
    :title="'客户档案变更列表'"
    @update:visible="updateVisible" @open="init">
    <ele-pro-table
      ref="tableMaterial"
      :where="where"
      :datasource="dataList"
      :columns="columns"
      :need-page="false"
      :toolbar="false"
      :header-cell-style="{'text-align':'center'}"
      highlight-current-row
      height="calc(100vh - 53px)">
      <!-- 表头工具栏 -->
      <template slot="toolbar">
        <el-button v-if="false"
                   size="small"
                   type="primary"
                   icon="el-icon-plus"
                   class="ele-btn-icon"
                   @click="openEdit(null)"
        >添加
        </el-button>
        <el-button
          size="small"
          type="danger"
          icon="el-icon-delete"
          class="ele-btn-icon"
        >删除
        </el-button>
      </template>
      <!-- 操作列 -->
      <template slot="realnum" slot-scope="{row}">
        <el-input size="small" v-model="row.realnum" clearable></el-input>
      </template>
    </ele-pro-table>
  </el-drawer>
</template>

<script>
import Locale from 'element-ui/lib/mixins/locale';
// 默认主题色
const DEFAULT_THEMES = [
  {
    name: 'default',
    value: null,
    color: '#1890ff'
  },
  {
    name: 'dust',
    value: '#5f80c7'
  },
  {
    name: 'sunset',
    value: '#faad14'
  },
  {
    name: 'volcano',
    value: '#f5686f'
  },
  {
    name: 'purple',
    value: '#9266f9'
  },
  {
    name: 'cyan',
    value: '#2bccce'
  },
  {
    name: 'green',
    value: '#33cc99'
  },
  {
    name: 'geekblue',
    value: '#32a2d4'
  }
];

export default {
  name: 'customerLog',
  mixins: [Locale],
  emits: [
    'change-style',
    'change-color',
    'change-dark-mode',
    'change-weak-mode',
    'update:visible'
  ],
  props: {
    // 是否显示, 支持.sync修饰
    visible: Boolean,
    // 颜色选择器预设颜色
    data: Array,
    custcode:String
  },
  data() {
    let chooseColor = this.color;
    if (this.color && typeof this.themes !== 'undefined' && this.themes !== null) {
      (this.themes.length ? this.themes : DEFAULT_THEMES).forEach((t) => {
        if (this.color === t.value) {
          chooseColor = null;
        }
      });
    }
    return {
      form:{},
      url:'/kdl/customerlog',
      columns: [
        {
          columnKey: 'index',
          type: 'index',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'customercode',
          label: '客户编码',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center'
        },
        {
          prop: 'customername',
          label: '客户名称',
          showOverflowTooltip: true,
          minWidth: 180,
          align: 'left'
        },
        {
          prop: 'deliveryaddress',
          label: '企业地址',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'left'
        },
        {
          prop: 'nation',
          label: '国家',
          showOverflowTooltip: true,
          minWidth: 60,
          align: 'center'
        },
        {
          prop: 'region',
          label: '地区',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center'
        },
        {
          prop: 'transzone',
          label: '运输区域',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center'
        },
        {
          prop: 'profession',
          label: '行业',
          showOverflowTooltip: true,
          minWidth: 60,
          align: 'center'
        },
        {
          prop: 'restcode',
          label: '码上放心编码',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'left'
        },
        {
          prop: 'city',
          label: '城市代码',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center'
        },
        {
          prop: 'contacts',
          label: '联系人',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'tel',
          label: '联系电话',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'qcusername',
          label: '专管员',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'ncts',
          label: '更新时间',
          showOverflowTooltip: true,
          minWidth: 140,
          align: 'center'
        },
        {
          prop: 'remark',
          label: '变更说明',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        // {
        //   prop: 'tihWay',
        //   label: '提货方式',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'yewType',
        //   label: '业务类型',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'danjxcSide',
        //   label: '单据下传方',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'hanghao',
        //   label: '行号',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'shangpNo',
        //   label: '商品编号',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'jihNum',
        //   label: '开票数量',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'num',
        //   label: '实际数量',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'lot',
        //   label: '批次号',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'shengcChar',
        //   label: '生产日期',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'youxChar',
        //   label: '有效期',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'chonghFlg',
        //   label: '冲红标志',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'tuihReason',
        //   label: '退货原因',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'kub',
        //   label: '库别',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'khZzbm',
        //   label: 'NC组织编码',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'center'
        // },
        // {
        //   prop: 'yezId',
        //   label: '九州通业主编码',
        //   showOverflowTooltip: true,
        //   minWidth: 140,
        //   align: 'center'
        // },
        // {
        //   columnKey: 'action',
        //   label: '操作',
        //   width: 160,
        //   align: 'center',
        //   resizable: false,
        //   slot: 'action',
        //   fixed: "right"
        // }
      ],
      where:{custcode:this.custcode},
      materialItem:{},
      returnReasonList:[],
      dataList:[],
      // 默认的主题色
      defaultThemes: DEFAULT_THEMES,
      // 颜色选择器选中颜色
      chooseColor: chooseColor
    };
  },
  mounted() {
    if(this.data)
    {
      this.form = Object.assign({},this.data[0]);
    }
  },
  methods: {
    async init(){
      console.log(this.data);
      if(this.data && this.data.length>0)
      {
        this.where.custcode = this.data[0].customercode;
        var res2 = await this.$http.get('/kdl/customerlog',{params:this.where});
        if(res2.status==200)
        {
          this.dataList = res2.data.data;
        }

      }

    },
    /* 修改visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    reload(){
      this.updateVisible(false);
      if(this.material && this.material.length>0)
      {
        this.$emit('donematerial',this.form.realreason,this.form.remark,this.form.opertype);
      }
      else
      {
        this.$emit('done',this.form.realreason,this.form.remark,this.form.opertype);

      }
    },
    getReturnReasonList(){
      this.$http.get('/dictdata/index?dictId=5&page=1&limit=1000').then(res => {
        this.returnReasonList = res.data.data.records;
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  }
}
</script>

<style scoped>
.ele-setting-wrapper {
  padding: 20px 18px;
}

.ele-setting-wrapper .ele-setting-title {
  font-size: 13px;
  margin-bottom: 15px;
}

/* 主题风格 */
.ele-setting-wrapper .ele-setting-theme > div {
  width: 52px;
  height: 36px;
  line-height: 1;
  font-size: 18px;
  border-radius: 3px;
  margin: 0 20px 30px 0;
  padding: 14px 0 0 24px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background-color .2s;
}

.ele-setting-wrapper .ele-setting-theme > div:before,
.ele-setting-wrapper .ele-setting-theme > div:after,
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
  content: "";
  width: 100%;
  height: 10px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  transition: background-color .2s;
}

.ele-setting-dark .ele-setting-theme > div {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.ele-setting-dark .ele-setting-theme > div:before,
.ele-setting-dark .ele-setting-theme > div:after,
.ele-setting-dark .ele-setting-theme > div > .ele-bg-primary {
  background: #1f1f1f;
}

.ele-setting-wrapper .ele-setting-theme > div:after {
  width: 14px;
  height: 100%;
}

.ele-setting-wrapper .ele-setting-theme > div.ele-side-dark:after,
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:after {
  background: #001529;
}

.ele-setting-dark .ele-setting-theme > div.ele-side-dark:after,
.ele-setting-dark .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:before,
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:after {
  background: #262626;
}

.ele-setting-wrapper .ele-setting-theme > div.ele-head-light:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
  z-index: 1;
}

/* 主题色选择 */
.ele-setting-wrapper .ele-setting-colors {
  color: #fff;
  margin-bottom: 20px;
}

.ele-setting-wrapper .ele-setting-color-item {
  width: 20px;
  height: 20px;
  line-height: 22px;
  border-radius: 2px;
  margin: 8px 8px 0 0;
  display: inline-block;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  vertical-align: top;
  position: relative;
  text-align: center;
  cursor: pointer;
}

/* 主题配置项 */
.ele-setting-wrapper .ele-setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.ele-setting-wrapper .ele-setting-item .setting-item-title {
  flex: 1;
  line-height: 28px;
}

.ele-setting-wrapper .ele-setting-item .setting-item-control {
  line-height: 1;
  max-width: 95px;
}

.ele-setting-wrapper .el-divider {
  margin-bottom: 20px;
}

/* 颜色选择器 */
.ele-setting-color-picker.el-color-picker {
  height: auto;
  margin-top: 8px;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__trigger {
  padding: 0;
  width: 20px;
  height: 20px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.ele-setting-color-picker.el-color-picker .el-color-picker__color {
  border: none;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__color-inner {
  border-radius: 2px;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__empty {
  background: linear-gradient(45deg, #00dbde 5%, #fc00ff 105%);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  border-radius: 2px;
  font-size: 0;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__icon {
  font-size: 14px;
}
.el-row {
  margin-bottom: -10px;
  margin-top: 1px;
  display: flex;
  flex-wrap: wrap
}
</style>
